<template>
	<view class="global">
		<uni-nav-bar dark :fixed="true" shadow background-color="#007AFF" status-bar title="商家详情" @clickLeft="back"
			title-align="left" leftText="返回" />
		<view class="content">
			<uni-card class="card">
				<view class="box" style="display: flex;">
					<view style="flex: 1; display: flex; flex-direction: column; justify-content: space-between;">
						<view style="font-size: 36rpx; font-weight: bold;">{{ business.name || '' }} 
						 </view>
						 <button type="default"  size="mini"  @click="reset()" v-if="issc">取消收藏</button> <button type="default" size="mini" @click="collect()"  v-if="!issc">收藏</button>
						<view>
							<text style="padding-right: 10rpx; border-right: 2rpx solid #ccc;">平台配送</text>
							<text style="padding: 0 10rpx; border-right: 2rpx solid #ccc;">免配送费</text>
							<text style="padding: 0 10rpx;">30分钟送达</text>
						</view>
						<view>
							地址：{{ business.address || '' }}
						</view>
						<view>
							联系电话：{{ business.phone || '' }}
						</view>
					</view>

					<view style="width: 200rpx; height: 200rpx;">
						<image :src="business.avatar" style="width: 100%; height: 100%; border-radius: 50%;"></image>
					</view>
				</view>
			</uni-card>
			<view class="cateshop">
				<view class="catelist">
					<view :class="acindex == index? 'accate':'cate'" @click="checkcate(index)"
						v-for="item,index in cate">
						{{item.cname}}
					</view>
				</view>
				<view class="shoplist">
					<view style="display: flex; grid-gap: 20rpx; margin-bottom: 20rpx;" v-for="item in goodsList"
						:key="item.id">
						<view style="width: 200rpx; height: 200rpx;">
							<image :src="item.img"
								style="width: 200rpx; height: 200rpx; border-radius: 10rpx; display: block;"></image>
						</view>
						<view style="flex: 1; display: flex; flex-direction: column; justify-content: space-between;">
							<view style="font-size: 32rpx; font-weight: bold;">{{ item.name }}</view>
							<view style="font-size: 24rpx;">{{ item.descr }}</view>
							<view>
								<text class="mini-btn">7折</text>
								<text style="font-size: 24rpx; margin-left: 10rpx;">已售 30</text>
							</view>
							<view>
								<text style="font-size: 24rpx;text-decoration: line-through;">￥{{ item.price }}</text>
								<text
									style="color: orangered;font-size: 24rpx; margin-left: 10rpx;">￥{{ item.money || 0 }}</text>
								<text class="mini-btn" style="margin-left: 5rpx;">到手价</text>
							</view>
							<view @click="xuangou(item.id)">
								<text class="mini-btn-fill">选购</text>
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>
		<view class="fix_bottom">
			<uni-badge size="small" :text="count" absolute="rightTop" style="margin-right:20px;" type="primary">
				<image src="../../static/cart.png" @click="clickpop" style=" width: 20px;height: 20px;" mode=""></image>
			</uni-badge>
			<button type="primary" @click="ljxd" class="ljxd">立即下单</button>
		</view>
		<uni-popup ref="popup" type="bottom">

			<view class="cart">
				<view class="clear" @click="clearcart()">
					<image src="../../static/qk.png" mode=""></image>清空
				</view>
				<view class="shoplist1" v-for="item in cartlist">
					<view class="shopimg">
						<image :src="item.img" mode=""></image>
					</view>
					<view class="shopinfo">
						<view class="shoptitle">
							{{item.gname}}
						</view>
						<view class="shopprice">
							￥{{item.price}}
						</view>
					</view>
					<view class="">
						<uni-number-box v-model="item.num" @change="changeValue(item.id,item.num,item.goodsId)" />
					</view>
				</view>
				<view class="allcount">
					总金额: <span style="color:red"> {{allcount}}</span>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import $H from '../../utils/request.js';
	export default {
		data() {
			return {
				count: 0,
				acindex: 0,
				cate: [],
				allcount:0,
				goodsList: [],
				cateid: "",
				business: {
					id: "",
				},
				cartlist: [],
				user: {},
				issc:false
			}
		},
		onLoad(e) {
			console.log(e);
			this.user = uni.getStorageSync("userinfo");
			this.business.id = e.id
			
			this.getinfo()
			this.getcate()
			this.getcollect()
			this.getcartlist()
		},
		methods: {
			reset(){
				$H.post(`collect/reset?businessId=${this.business.id}&&userId=${this.user.id}`, ).then(res=>{
						this.getcollect()
					})
				
			},
			collect(){
				$H.post(`collect/add`, {
				userId:this.user.id,
					businessId:this.business.id
				}).then(res=>{
					this.getcollect()
				})
			},
			getcollect(){
				$H.post(`collect/select?businessId=${this.business.id}&&userId=${this.user.id}`, {
				}, {
					token: true
				}).then(res => {
console.log(res)

this.issc=res

				})
			},
			ljxd(){
				if(this.count == 0){
					uni.showToast({
						title:"请选择商品",
						icon:'none'
					})
					return
				}
				uni.navigateTo({
					url:"/pages/orderItem/orderItem?busid="+this.business.id
				})
			},
			clearcart(){
				$H.post(`cart/clear?businessId=${this.business.id}&&userId=${this.user.id}`, {
				}, {
					token: true
				}).then(res => {
					this.getcartlist()
				})
			},
			getcartlist() {
				$H.post(`cart/all?businessId=${this.business.id}&&userId=${this.user.id}`, {

				}, {
					token: true
				}).then(res => {
					console.log(res)
					this.count = 0;
					this.allcount=0
					this.cartlist = res.list
				this.cartlist.forEach(el=>{
					this.count+=el.num
					this.allcount+=el.num*el.price
				})
				})

			},
			xuangou(id) {
				$H.post("cart/add", {
					businessId: this.business.id,
					goodsId: id,
					num: 1,
					userId: this.user.id
				}, {
					token: true
				}).then(res => {
					console.log(res);
					this.getcartlist()
				})

			},
			changeValue(id,num,gid) {
				console.log(id,num)
				console.log(this.cartlist)
				$H.post("cart/update",{
					id:id,
					businessId:this.business.id,
					userId:this.user.id,
					num:num,
					goodsId:gid
				},{token:true}).then(res=>{
					this.getcartlist()
				})

			},
			checkcate(index) {
				this.acindex = index
				this.cateid = this.cate[index].id
				this.getshop()
			},
			getcate() {
				$H.post("Category/selectById?id=" + this.business.id, {}, {
					token: true
				}).then(res => {
					console.log(res)
					this.cate = res
					if (this.cate.length > 0) {
						this.cateid = this.cate[0].id
						this.getshop()
					}
				})
			},
			getshop() {
				$H.post(`Goods/selectByIDandCID?id=${this.cateid}&&busId=${this.business.id}`, {}, {
					token: true
				}).then(res => {
					console.log(res, "22222")
					this.goodsList = res
				})
			},
			getinfo() {
				$H.post("Business/detail?id=" + this.business.id, {}, {
					token: true
				}).then(res => {
					console.log(res)
					this.business = res
				})
			},
			back() {
				uni.navigateBack()
			},
			clickpop() {
				this.$refs.popup.open()
			}

		}
	}
</script>
<style>
	.card .uni-card {
		margin: 0px !important;
		padding: 0px !important;

	}
</style>
<style scoped>
	.allcount{
		width: 100%;
		font-size: 14px;
		text-align: right;
	}
	.shopimg image {
		width: 50px;
		height: 50px;
		border-radius: 10px;
		margin-right: 10px;
	}

	.shopprice {
		font-size: 14px;
		color: red;
	}

	.shoptitle {
		font-size: 14px;
		margin-bottom: 13px;
	}

	.shopinfo {
		flex: 1;
		height: 50px;
	}

	.shoplist1 {
		width: 100%;
		display: flex;
		align-items: center;
	}

	.cart {
		width: 100%;
		height: auto;
		padding: 20px 20px 140px 20px;
		box-sizing: border-box;
		background-color: #fff;
	}

	.clear image {
		width: 16px;
		height: 16px;
		vertical-align: middle;
	}

	.clear {
		color: rgb(153, 153, 153);
		text-align: right;
	}

	.ljxd {
		flex: 1;
		border-radius: 50px;
	}

	.fix_bottom {
		position: fixed;
		bottom: 0px;
		height: 50px;
		background: #fff;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.shoplist {
		width: calc(100% - 90px);
		padding-left: 10px;
		box-sizing: border-box;
	}

	.accate {
		width: 100%;
		height: 36px;
		background-color: #fff;
		border-left: 2px solid yellow;
		font-size: 13px;
		text-align: center;
		line-height: 36px;
	}

	.catelist {
		width: 90px;
		height: auto;

	}

	.cate {
		width: 100%;
		height: 36px;
		background-color: #eee;
		text-align: center;
		line-height: 36px;
		border-left: 2px solid #eee;
		font-size: 13px;
	}

	.cateshop {
		width: 100%;
		display: flex;
		background: #fff;

		margin-top: 10px;
	}

	.bus_info {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.content {
		width: 100%;
		height: 100%;
		padding: 10px;
		box-sizing: border-box;
	}



	.category-item {
		padding: 15rpx;
		background-color: #eee;
		border-bottom: 2rpx solid #fff;
	}

	.category-active {
		background-color: #fff;
		color: orange;
		border-left: 5rpx solid orange;
	}

	.mini-btn {
		border: 2rpx solid orangered;
		padding: 0 4rpx;
		font-size: 22rpx;
		color: orangered;
		border-radius: 5rpx;
		font-weight: bold;
	}

	.mini-btn-fill {
		background-color: orange;
		padding: 0 4rpx;
		color: #fff;
		font-size: 24rpx;
		border-radius: 5rpx;
	}

	.global {
		width: 100%;
		height: 100%;
		background: #e5e5e5;
	}
</style>
